<template>
  <div class="common-layout">
    <el-container>
      <el-header>发布贴吧</el-header>
      <el-main>
        <el-input
            v-model="textarea1"
            autosize
            type="textarea"
            placeholder="title"
        />
        <div style="margin: 20px 0" />
        <el-input
            v-model="textarea2"
            :autosize="{ minRows: 10, maxRows: 15 }"
            type="textarea"
            placeholder="content"
        />
        <el-button type="primary" @click="submit">发布</el-button>
      </el-main>
    </el-container>
  </div>
</template>



<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import userApi  from '../../apis/post'
import {useRouter} from 'vue-router'
const router = useRouter()

const textarea1 = ref('')
const textarea2 = ref('')


const submit = async() =>{
 const res = await userApi.addPost(textarea1.value,textarea2.value)
 //console.log(res)
 if(res.success===true) ElMessage.success(res.message);
 else ElMessage.error(res.message)



 textarea1.value='',
 textarea2.value=''
}





// const submit = () => {
//   ElMessageBox.confirm(
//       '确定要提交吗？',
//       '提示',
//       { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
//   ).then(() => {
//     axios
//         .post('http://localhost:8080/post', {
//           textarea1: textarea1.value,
//           textarea2: textarea2.value
//         })
//         .then((response: any) => {
//           ElMessage.success('提交成功');
//           textarea1.value = '';
//           textarea2.value = '';
//         })
//         .catch((error: any) => {
//           ElMessage.error('提交失败');
//         });
//   })
//       .catch(() => {
//         // 当用户点击返回或关闭对话框时不执行提交操作
//       });

// };


</script>
<style scoped>
.common-layout{
  width: 1000px;
  margin: 0 auto;
}
.el-header{
  font-size: 25px;
  margin-top: 30px;
}
.el-button{
  margin-top: 20px;
}
</style>